<template>
	<view class="wrap">
		<u-swiper class="a-swiper" :list="list" height="320" :interval="interval"></u-swiper>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default() {
					return []
				}
			},
			interval: {
				type: Number,
				default: 3000
			}
		},
		options: { styleIsolation: 'shared' }
	}
</script>

<style lang="scss" scoped>
.wrap {
	/deep/ .a-swiper {
		.u-swiper-wrap {
			border-radius: 16rpx !important;
			swiper {
				border-radius: 16rpx;
				overflow: hidden;
			}
			.u-swiper-indicator {
				position: static;
				padding: 16rpx 0 !important;
				.u-indicator-item-round {
					background-color: #8b8b8b;
					&.u-indicator-item-round-active {
						background-color: $u-btn-bg-color;
					}
				}
			}
		}
	}
}
</style>
